<div data-dojo-attach-point="visibiltyWidget">
  <label data-dojo-attach-point="errorText" style="display: none"></label>
  <div class="controls" data-dojo-attach-point="controls">
    <div class="controlGroup">
      <label data-dojo-attach-point="coordInputLabel">${nls.observerLocation}</label>
      <div class="controlItem">
        <input class="jimu-input coordInput" data-dojo-attach-point="observerCoords" placeholder="Enter Coordinates" />
        <div class="controlItem paddedLeft">
          <div class='add-with-icon'>
            <span title="Format Input" class="jimu-icon jimu-icon-setting" data-dojo-attach-point="coordinateFormatButton"></span>
          </div>
          <div class='add-with-icon'>
            <div title="Add Observer" class="draw" data-dojo-attach-point="addPointBtn"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="controlGroup">
      <label data-dojo-attach-point="FOVLabel">${nls.fieldOfView}</label>
      <div class="center" data-dojo-attach-point="FOVGroup">
        <input type="text" value="360" class="fov" data-displayInput="true"data-cursor="true" disabled="true" data-dojo-attach-point="FOVInput"/>
        <p class="cusrortooltip" id="tooltip" data-dojo-attach-point="tooltip" hidden='true'></p>        
      </div>
    </div>
    <div class="controlGroup">
      <div class="interactive-checkbox"
                   data-dojo-attach-point="angleUnits" 
                   data-dojo-type="jimu/dijit/CheckBox"
                   data-dojo-props='checked:false' 
                   label='${nls.useMilsText}'></div> 
    </div>
    <div class="controlGroup">
      <label>${nls.observerHeight}</label>
        <div class="controlItem">
          <input
            data-dojo-type='dijit/form/NumberTextBox'
            required="true" value="2" data-dojo-props="
            constraints: {min: 0},
            invalidMessage: 'Please enter a numeric value.',
            rangeMessage: 'Invalid Observer Height'"
            data-dojo-attach-point="observerHeight"></input>
          <select style="width: 100px" class="controlSpace noResize" data-dojo-type="dijit/form/Select" data-dojo-attach-point="observerHeightDD" >
            <option value="feet">${nls.feet}</option>
            <option value="kilometers" selected="selected">${nls.kilometers}</option>
            <option value="miles">${nls.miles}</option>
            <option value="meters">${nls.meters}</option>
            <option value="nautical-miles">${nls.nauticalMiles}</option>
            <option value="yards">${nls.yards}</option>
          </select>
        </div>
      </div>        
      <div class="controlGroup">
        <label>${nls.minObsDistance}</label>
          <div class="controlItem">
            <input
              data-dojo-type='dijit/form/NumberTextBox'
              required="true" value="3" data-dojo-props="
              constraints: {min: 0},
              invalidMessage: 'Please enter a numeric value.',
              rangeMessage: 'Invalid Minimum Observable Range'"
              data-dojo-attach-point="minObsRange"></input>
            <select style="width: 100px" class="controlSpace noResize" data-dojo-type="dijit/form/Select" data-dojo-attach-point="distanceUnitDD" >
              <option value="feet">${nls.feet}</option>
              <option value="kilometers" selected="selected">${nls.kilometers}</option>
              <option value="miles">${nls.miles}</option>
              <option value="meters">${nls.meters}</option>
              <option value="nautical-miles">${nls.nauticalMiles}</option>
              <option value="yards">${nls.yards}</option>
            </select>
          </div>
      </div>        
      <div class="controlGroup">
        <label>${nls.maxObsDistance}</label>
          <div class="controlItem">
            <input
              data-dojo-type='dijit/form/NumberTextBox'
              required="true" value="5" data-dojo-props="
              constraints: {min: 0},
              invalidMessage: 'Please enter a numeric value.',
              rangeMessage: 'Maximum Observable Range must be greater than the Minimum Observable Range'"
              data-dojo-attach-point="maxObsRange"></input>              
          </div>
      </div> 
  </div>
  <div class="buttonContainer" data-dojo-attach-point="buttonContainer">
    <div class="jimu-btn" data-dojo-attach-point="btnCreate">${nls.createBtn}</div>
    <div class="jimu-btn controlSpace" data-dojo-attach-point="btnClear">${nls.clearBtn}</div>
  </div>      
</div>

